<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  <style type="text/css">
    div#myDiv{
     width:200px; 
     height:100px; 
     background:#CEE7FF; 
     border:5px solid #ccc;
     padding:5px;
     margin: 10px;
     box-sizing: border-box; 
   }
  </style>
	<script type="text/javascript" src="../../jquery-2.1.1.js"></script>
	<title>偏移量ui</title>
</head>
<body>

<div id="myDiv">Div content ...</div>
<button onclick="checkWidth('myDiv');">Check Width</button>

<script type="text/javascript">

    var elem = document.getElementById('myDiv');

    // //border-left-width + padding-left + width + padding-rigth + border-right-widht
    // var elemWidth = elem.offsetWidth;
    // //border-top-width + padding-top + height + padding-bottom + border-bottom-width
    // var elemHeigth = elem.offsetHeight;

    var $elem = $('#myDiv')

    //,elem.innerWidth() ,elem.outerWidth() 
    console.log(  $elem.outerWidth(true) )

    var style = document.defaultView.getComputedStyle(elem,null)

    // console.log(  style )


</script>

</body>
</html>

